import React, {useState} from 'react';
import {Layout, Menu} from "antd";
import type {MenuProps} from 'antd';
//引入图标
import {HomeOutlined, UsergroupDeleteOutlined,ToolOutlined} from '@ant-design/icons';
import {useNavigate} from "react-router-dom";
//引入布局组件
const {Header} = Layout;


//接收来自父组件的传值props
// interface HeaderProps {
//     name: string
// }

//定义头部菜单盒子的样式
const headerStyle: React.CSSProperties = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#fff',
    width: '60%',
    margin: '0 auto',
    border: 'none'
};

//定义菜单
type MenuItem = Required<MenuProps>['items'][number];

//定义菜单数据
const items: MenuItem[] = [
    {
        label: '首页',
        key: 'home',
        icon: <HomeOutlined/>,
    },
    {
        label: '关于我们',
        key: 'about',
        icon: <UsergroupDeleteOutlined/>,
    },
    {
        label: '测试页面',
        key: 'test',
        icon:<ToolOutlined />
    },
];

/**
 * 头部组件
 * @constructor
 */
const HeaderPage: React.FC = () => {
    // 定义一个 useNavigate 函数，路由跳转
    const navigate = useNavigate();

    //定义菜单 onClick
    const [current, setCurrent] = useState('home');
    const onClick: MenuProps['onClick'] = (e) => {
        //菜单key
        let val = e.key ;
        //更新选中的菜单key
        setCurrent(val);
        // 跳转页面
        if (val === 'home') {
            navigate('/');
        } else if (val === 'about') {
            navigate('/about');
        }else if (val === 'test') {
            navigate('/test');
        }
    }

    return (
        <>
            {/*<Card>我是头部:{name}</Card>*/}
            <Header style={headerStyle}>
                <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items}/>
                {current}
            </Header>
        </>
    );
};

export default HeaderPage;
